import React from 'react';
import { Tabs, Button } from 'antd';

const { TabPane } = Tabs;

interface Props {
  setShowList: Function;
  magicList: {
    fields: {
      key: string;
      value: string;
      level: string;
      class: string;
    };
    id: string;
  }[];
}
function callback(key: any) {
  console.log('key:', key);
}

const properties = ['火', '冰', '水', '风', '土', '雷', '光', '暗', '治愈', '空间'];

function Filter(props: Props) {
  const { setShowList, magicList } = props;

  const renderProperties = () => {
    return properties.map((item: string) => {
      return (
        <div
          key={item}
          className='magic-filter-property'
        >
          <Button>{item}</Button>
        </div>
      );
    });
  };
  return (
    <div className='magic-filter'>
      <Tabs defaultActiveKey="1" onChange={callback}>
        <TabPane tab="全部" key="1">
          全部
        </TabPane>
        <TabPane tab="属性" key="2">
          {renderProperties()}
        </TabPane>
        <TabPane tab="等级" key="3">
          等级
        </TabPane>
      </Tabs>
    </div>
  );
};

export default Filter;
